<template>
	<div class="content">
		<view class="question">
			<scroll-view :style="{height:sh+'px'}" class="sv" scroll-y="true">
				<view v-if="history.length>0">
					<view class="dialog" :class="{user:item.role=='user',assistant:item.role!='user'}"
						v-for="(item,index) in history">
						<uni-icons :type="item.role=='user'?'contact':'chat-filled'" size="30"
							:color="item.role=='user'?'#999':'#0f0'" />
						<text class="msg">
							{{item.content}}
						</text>
					</view>
				</view>
			</scroll-view>
			<view class="word">
				<uni-easyinput style="width: 80%;" class="input" v-model="question" placeholder="请输入提问内容" />
				<button class="btn" @tap="send">提问</button>
			</view>
		</view>
	</div>
</template>

<script setup>
	import {
		ref
	} from "vue"
	import {
		onLoad
	} from '@dcloudio/uni-app'

	import {
		CONFIG
	} from '../../utils/config';

	onLoad(() => {

	})

	let history = ref([])

	let model = ref({
		"model": "moonshot-v1-8k",
		"messages": [

		],
		"temperature": 0.3
	})

	let question = ref("")

	async function send() {
		history.value.push({
			"role": "user",
			"content": question.value
		})
		model.value.messages = history.value
		let res = await uni.$post(CONFIG.kimi_url, model.value)
		console.log(res)
		history.value.push(res.choices[0].message)
		//清空文本框
		question.value = ""
	}
</script>

<style lang="scss" scoped>
	.content {
		height: calc(100vh - 97px);
		border: 1px solid red;

		.question {
			// max-height: 500px;
			height: calc(100vh - 97px - 65px);
			border: 1px solid red;
			overflow-y: auto;
			padding: 10px;
		}

		.word {
			// height: 35px;
			display: block;
			position: fixed;
			/* 固定位置 */
			bottom: 20px;
			/* 沉底 */
			left: 3px;
			/* 从左边开始 */
			width: 100%;
			/* 宽度占满整个屏幕宽度 */
			z-index: 1000;

			/* 确保输入框在其他元素之上 */
			.btn {
				width: 60px;
				text-align: center;
				height: 35px;
				border-radius: 5px;
				font-size: 13px;
				background-color: skyblue;
				color: #fff;
				float: right;
				right: 8px;
				bottom: 36px;
			}
		}
	}
</style>